<template>
  <div class="user_promotion">
    <div class="header">
      <div class="cur">当前佣金</div>
      <div class="curNum">0.00</div>
      <div class="tt_com">
        <div class="item">
          <p class="cc_y">昨日收益</p>
          <p class="cc_t">0</p>
        </div>
        <div class="item">
          <p class="cc_y">积累收益</p>
          <p class="cc_t">0</p>
        </div>
      </div>
      <div class="recode">体现记录</div>
      <div class="tiBtn">立即提现</div>
    </div>
    <div class="card">
        <a class="c_item"><img src="../../../assets/icon/user/pro_code.png" alt=""><p>推广名片</p></a>
        <a class="c_item"><img src="../../../assets/icon/user/pro_fenxi.png" alt=""><p>推广人统计</p></a>
        <a class="c_item"><img src="../../../assets/icon/user/pro_pack.png" alt=""><p>佣金记录</p></a>
        <a class="c_item"><img src="../../../assets/icon/user/pro_order.png" alt=""><p>推广人订单</p></a>
        <a class="c_item"><img src="../../../assets/icon/user/pro_huangguan.png" alt=""><p>推广人排行</p></a>
        <a class="c_item"><img src="../../../assets/icon/user/pro_rank.png" alt=""><p>佣金排行</p></a>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.header {
  height: 187px;
  background: url(../../../assets/icon/user/pro_bg.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding-top: 25px;
  position: relative;
  .cur {
    text-align: center;
    color: #fff;
    font-size: 18px;
  }
  .curNum {
    text-align: center;
    font-size: 50px;
    height: 60px;
    line-height: 60px;
    margin-top: 12px;
  }
  .tt_com {
    margin-top: 15px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .item {
      width: 100px;
      text-align: center;
      .cc_y {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.8);
      }
      .cc_t {
        font-size: 15px;
      }
    }
  }
  .recode {
    position: absolute;
    top: 25px;
    right: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    // &::after{
    //     content: '';
    //     display: inline-block;
    //     width: 16px;
    //     height: 16px;
    //     background: url(../../../assets/icon/common/right_arrow.svg) no-repeat;
    //     background-size: 100% 100%;
    //     vertical-align: middle;
    //     color: #fff;
    // }
  }

  .tiBtn{
      width: 129px;
      height: 34px;
      border-radius:17px ;
      background-color: #e93323;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 34px;
      position: absolute;
      bottom: -19px;
      left: 50%;
      transform: translateX(-50%);
  }
}
.card{
    margin-top: 35px;
    padding: 0 10px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .c_item{
        width: 172px;
        height: 120px;
        border-radius: 11px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        p{
            text-align: center; 
            color:#666;
            font-size: 15px;
            margin-top: 7px;
        }
        >img{
            display: block;
            width: 37px;
        }
    }
}
</style>

